<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>客服-{$service.nickname}</title>
    <script>
        WEB_ROOT_URL = '{$basename}';
        WEB_STATIC_URL = '{$static}';
        WEB_FILE_URL = '/file';
        IS_DEBUG = {:env('APP_DEBUG')};
    </script>
    {load href="__libs__/jquery/jquery.min.js"/}
    {load href="__style__/index/chat.css"}
    {load href="__libs__/jquery/jquery.cookie.js"/}
    {load href="__libs__/jquery/jquery.form.min.js"/}
    {load href="__libs__/layui/css/layui.css"/}
    {load href="__libs__/layui/layui.js"/}
    {load href="__libs__/layer/skin/layer.css"/}
    {load href="__libs__/layer/layer.js"/}
    {load href="__libs__/swiper-4.3.3.min.js"/}
    <script src="__libs__/adapter.js"></script>
    <script type="text/javascript" src="__libs__/webrtc/recorder.js"></script>
    <link rel="stylesheet" href="__libs__/myeditor/css/editormd.css"/>
    <link rel="stylesheet" href="__style__/index/cu.css"/>
    <style>

        .push-evaluation {
            margin: 50px 0;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 15px;
            background-color: #F5FAFF;
            color: #50ACFF;
        }
    </style>
</head>
<body>

<script>
    var mediaStreamTrack;
    var service_id = '{$service.id}';
    // 离线情况下获取消息间隔
    var offline_get_time = 3;
    var last_showtime = '';
    var history_chat_content_id = 0;
    var login_token = "{$customer.token.token}";
    var ws_domain ="ws://{$host}:{:config('gateway_worker.port')}";
    var now_chat_content_id = 0;
    var to_chat_id = '{$chat.to_chat_id}';
    var my_chat_id = '{$chat.id}';
    var from_url = '{$from_url}';
    from_url.replace("%23", "#");
    from_url.replace("%26", "&");
    var login_user_id = "{$customer.id}";
    var to_user_id = '{$chat.to_user_id}';
    var visitor_id = '{$customer.id}';
    var pic = '{$customer.avatar_url}';
    if (pic == "") {
        pic = "__image__/index/avatar-red2.png";
    }
    var num;
    var t;

    var hintState = 'off';

    var myTitle = document.title;

    var isActive;
    var socket_try_connect_time = 3;
    var socket_try_connect_range = 10;
    var socket_is_connect = false;
    var socketTime = null;
    var socket;
</script>
<div class="bg">
    {notempty name='evaluate'}
    <div class="dialog" >
        <img class="close" src="__style__/index/close.png" alt="">
        <div class="title">{$evaluate.title}</div>
        <div class="dialog-body">
            <div style="margin-bottom: 20px;">{$evaluate.description}</div>

            {volist name='evaluate.content' id='vo'}
            <div class='evaluate-item evaluate-score' data-score="0">
                <span class="evaluate-title">{$vo}</span>
                <img class="star" data-id="1" src="__style__/index/star.png" alt="">
                <img class="star" data-id="2" src="__style__/index/star.png" alt="">
                <img class="star" data-id="3" src="__style__/index/star.png" alt="">
                <img class="star" data-id="4" src="__style__/index/star.png" alt="">
                <img class="star" data-id="5" src="__style__/index/star.png" alt="">
                <span class="evaluate-text">满意</span>
            </div>
            {/volist}
            {eq name='evaluate.open_text' value='1'}
            <div class='evaluate-item' style="height: 80px;line-height: 1;margin-top: 10px;align-items: flex-start">
                <span class="evaluate-title" style="min-width:60px;text-align: right">{$evaluate.text_title}</span>
                <textarea class="about-text" name="" id="" cols="50" rows="5"></textarea>
            </div>
            {/eq}


            <div class="evaluate-btn">
                <button class="submit">提交</button>
                <button class="reset">取消</button>
            </div>
        </div>
    </div>
    {/notempty}
</div>
<div class="offline" {if $is_offline== 1} style="display: block;" {/if}>
<div class="dialog" style="width: 370px;">
    <img class="close" src="__style__/index/close.png" alt="">
    <div class="dialog-body" style="padding:25px;padding-right: 45px;">
        <div style="margin-bottom: 20px;">回复</div>
        <div class='offline-item'>
            <span class="offline-title" style="min-width:60px;text-align: right">姓名</span>
            <input id="offline_name" type="text">
        </div>

        <div class='offline-item'>
            <span class="offline-title" style="min-width:60px;text-align: right">联系方式</span>
            <input id="offline_mobile" type="number"
                   onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))'>
        </div>

        <div class="evaluate-btn">
            <button class="submit">提交</button>
            <button class="reset">取消</button>
        </div>

    </div>
</div>
</div>
<div style="width: 80%;height: 90%;min-height:500px;min-width:900px;margin: 2% auto;position: relative;">
    <!--  对话框头部 -->
    <div class="header grey12">
        <img id="img_head" src="{$service.avatar.url}" style="width: 46px;height: 46px;border-radius: 50%;position: absolute;left: 10px;top: 7px;">
        <span id="services" style="color: #ffffff;margin-left:62px;font-size: 16px;">{$service.nickname}</span>
        <span id='service_icon' class="layui-badge-dot layui-bg-green" style="display:inline-block;width: 8px;height: 8px;border-radius: 8px;margin-left: 5px;"></span>
        <span id='service_icon_enter'style="display:inline-block;margin-left: 5px;font-size: 12px;"></span>
    </div>

    <div id="container" style="width: 65%;height: 90%;position: absolute;top:64px; ">
        <div class="workarea">
            <!--  对话内容部分 -->
            <div class="content" id="wrap">
                <ul class="conversation">
                </ul>
                <div style="height: 20px"></div>
            </div>
            <div class="footer widths">

                <div class="keyword">
                    <div class="swiper-wrapper" id="question_key_list">
                    </div>
                </div>
                <img class="toggle toggle-right" style="right: 1%" src="__image__/index/right.png" alt="">
                <img class="toggle toggle-left" style="left: 1%" src="__image__/index/left.png" alt="">
                <div class="tool_box">
                    <div class="wl_faces_content">
                        <div class="wl_faces_main">
                        </div>
                    </div>
                </div>
                <div class="msg-input">
                <textarea id="text_in" class="edit-ipt"
                          style="color: #555555; font-size: 14px; overflow-x: hidden;overflow-y:auto;word-break: break-all;width: 100%;height: 100%;border:none;"
                          contenteditable="true" hidefocus="true" tabindex="0"></textarea>
                </div>

                <div class="msg-toolbar-footer grey12">
                    <a onclick="send()" class="layui-btn msg-send-btn">发送</a>
                    <a id="showinfo" class="showinfo">
                        <div style="height: 10px;border-left: 1px solid #FFF;margin-top: 8px;padding: 7px 15px">
                            <img src="__image__/admin/b/up-menu.png" alt="">
                        </div>
                    </a>
                </div>
                <div class="msg-toolbar">
                    <a id="face_icon" href="javascript:" onclick="faceon()">
                        <img src="__image__/admin/b/smile.png" alt=""></a>
                    <!--                    <a id="video" style="cursor: pointer;" onclick="getvideo()"><i class="layui-icon" style="font-size: 26px;">&#xe6ed;</i></a>-->
<!--                                        <a onclick="getaudio()"><i class="layui-icon" style="font-size: 22px;cursor: pointer;">&#xe688;</i></a>-->
                    <a id="images" href="javascript:">
                        <form id="picture" enctype="multipart/form-data">
                            <div class="layui-box input-but  size">
                                <img src="__image__/admin/b/photo.png" alt="">
                                <input type="file" name="file" class="fileinput upload_image" onchange="uploadImage()"/>
                            </div>
                        </form>
                    </a>

                    <a id="files" href="javascript:">
                        <form id="file" enctype="multipart/form-data">
                            <div class="layui-box input-but  size">
                                <img src="__image__/admin/b/file.png" alt="">
                                <input type="file" name="file" class="fileinput upload_attachment" onchange="uploadFile()"/>
                            </div>
                        </form>
                    </a>

                     <a onclick="hint()"><i class="layui-icon" style="font-size: 22px;cursor: pointer;">&#xe645;</i></a>
                    <a onmouseover="info()" id="paste" style="position:absolute; right:5%;width: 115px"><img src="__image__/admin/b/screen.png" alt=""> 怎样发截图？</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 浮层 -->
    <div id='fuceng' class="enter_tips hide" >
        <ul style="width: 100%;height: 60px;">
            <li class="fuceng-li" onclick="choose(this)" name='1'>
                <img id='type1' class="layui-icon selecte-icon" src="__image__/admin/b/selected.png" alt=""><span>按Enter键发送消息，Ctrl+Enter换行</span>
            </li>
            <li class="fuceng-li selected-li" onclick="choose(this)" name='2'>
                <img id='type2' class="layui-icon selecte-icon" src="__image__/admin/b/selected.png" alt=""><span>按Ctrl+Enter键发送消息，Enter换行</span>
            </li>
        </ul>
    </div>
    <div id='xxxx' class="question_tips">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"
             style="margin: 0px;height: 50px;background-color: #f7f7f7">
            <ul class="layui-tab-title" id="tablist" style="height: 50px;border-bottom: 0;width: 100%">
                <li class="layui-this">常见问题</li>
            </ul>
            <div class="layui-tab-content" id="tabcontent">
                <div class="layui-tab-item layui-show" id="question_list" style="width: 100%;overflow-y: auto;">
                </div>
                <!--  <div class="layui-tab-item" id="connect_list" style="width: 100%;overflow-y: auto;">
                 </div> -->
            </div>
        </div>
    </div>
    <form id="myAwesomeForm" method="post" style="display: none">
        <!-- Submit提交按钮 -->
        <input type="submit" id="submitButton" name="submitButton" />
    </form>
</div>
<script type="text/javascript" src="__script__/functions.js?v={:time()}"></script>
<script type="text/javascript" src="__script__/connect.js?v={:time()}"></script>
<script type="text/javascript" src="__script__/common.js?v={:time()}"></script>
<script type="text/javascript" src="__script__/index/inchat.js?v={:time()}"></script>
<script type="text/javascript" src="__script__/index/server.js?v={:time()}"></script>
<script type="text/javascript" src="__script__/video.js?v=1.3"></script>

</body>
</html>

